﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<!DOCTYPE HTML>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/favicon.ico" media="screen" />
<jsp:include page="common/head.jsp" />
<title>admin-hui后台管理系统</title>
<meta name="keywords" content="H-ui.admin v2.4,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description" content="H-ui.admin v2.4，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
<style type="text/css">
/**保持无限极菜单对齐*/
li dl {
	padding-left: 10px
}
</style>
</head>
<body>
	<!-- 顶部导航栏 -->
	<header class="navbar-wrapper">
		<div class="navbar navbar-fixed-top">
			<div class="container-fluid cl">
				<lable class="logo navbar-logo f-l mr-10 hidden-xs">admin-hui后台管理系统</lable>
				<span class="logo navbar-slogan f-l mr-10 hidden-xs">v1.0</span>
				<nav id="Hui-userbar" class="nav navbar-nav navbar-userbar hidden-xs">
					<ul class="cl">
						<li>欢迎您</li>
						<li class="dropDown dropDown_hover"><a href="#" class="dropDown_A">${sessionScope.loginUser.name} <i class="Hui-iconfont">&#xe6d5;</i> </a>
							<ul class="dropDown-menu menu radius box-shadow">
								<li><a href="#">个人信息</a>
								</li>
								<li><a href="#">切换账户</a>
								</li>
								<li><a id="logout" href="javascript:;">退出</a>
								</li>
							</ul>
						</li>
						<li id="Hui-msg"><a href="javascript:;" title="消息" onclick="notice();"><span class="badge badge-danger">1</span><i class="Hui-iconfont"
								style="font-size:18px">&#xe68a;</i> </a>
						</li>
						<li id="Hui-skin" class="dropDown right dropDown_hover"><a href="javascript:;" class="dropDown_A" title="换肤"><i class="Hui-iconfont"
								style="font-size:18px">&#xe62a;</i> </a>
							<ul class="dropDown-menu menu radius box-shadow">
								<li><a href="javascript:;" data-val="default" title="默认（黑色）">默认（黑色）</a>
								</li>
								<li><a href="javascript:;" data-val="blue" title="蓝色">蓝色</a>
								</li>
								<li><a href="javascript:;" data-val="green" title="绿色">绿色</a>
								</li>
								<li><a href="javascript:;" data-val="red" title="红色">红色</a>
								</li>
								<li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a>
								</li>
								<li><a href="javascript:;" data-val="orange" title="绿色">橙色</a>
								</li>
							</ul>
						</li>
					</ul>
				</nav>
			</div>
		</div>
	</header>


	<!-- 左侧菜单栏 -->
	<aside class="Hui-aside">
		<input runat="server" id="divScrollValue" type="hidden" value="" />
		<div id="menu" class="menu_dropdown bk_2">${loginMenu}</div>
	</aside>


	<!-- 左侧菜单-隐藏显示 -->
	<div class="dislpayArrow hidden-xs">
		<a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a>
	</div>


	<!-- 主体内容 -->
	<section class="Hui-article-box">
		<div id="Hui-tabNav" class="Hui-tabNav hidden-xs">
			<div class="Hui-tabNav-wp">
				<ul id="min_title_list" class="acrossTab cl">
					<li class="active"><span title="我的桌面" data-href="viewWelcome">我的桌面</span><em></em>
					</li>
				</ul>
			</div>
			<div class="Hui-tabNav-more btn-group">
				<a id="js-tabNav-prev" class="btn radius btn-default size-S" href="javascript:;"><i class="Hui-iconfont">&#xe6d4;</i> </a><a id="js-tabNav-next"
					class="btn radius btn-default size-S" href="javascript:;"><i class="Hui-iconfont">&#xe6d7;</i> </a>
			</div>
		</div>
		<div id="iframe_box" class="Hui-article">
			<div class="show_iframe">
				<div style="display:none" class="loading"></div>
				<iframe scrolling="yes" frameborder="0" src="viewWelcome"></iframe>
			</div>
		</div>
	</section>

	<footer class="footer mt-20">
		<div class="container-fluid">
			<nav>
				<a href="#" target="_blank">关于我们</a> <span class="pipe">|</span> <a href="#" target="_blank">联系我们</a> <span class="pipe">|</span> <a href="#"
					target="_blank">法律声明</a>
			</nav>
			<p>
				Copyright &copy;2016 H-ui.net All Rights Reserved. <br> <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">京ICP备1000000号</a><br>
			</p>
		</div>
	</footer>
</body>
<jsp:include page="common/script.jsp" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
<script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script type="text/javascript">
	var $loginName = $("#Hui-userbar").children().find(".dropDown_A").eq(0);
	var $menu = $("#menu");
	var $notice = $("#notice");
	/****************嵌入socket开始**********************/
	var socket;
	if ('WebSocket' in window) {
		socket = new WebSocket("ws://" + Config.host + app_path + "/ws");
	} else if ('MozWebSocket' in window) {
		socket = new MozWebSocket("ws://" + Config.host + app_path + "/ws");
	} else {
		socket = new SockJS("http://" + Config.host + app_path + "/ws/sockjs");
	}
	/****************嵌入socket结束**********************/
	$(function() {
		
		/**防止页面嵌套*/
		if (top.location != self.location) {
			top.location = self.location;
		}

		/**注销*/
		$("#logout").click(function() {
			U.confirm("确认要退出吗？", function() {
				ajaxCall("logout.do");
			});
		});
		
		/**接收未读消息*/
		setTimeout(function() {
			notice();
		}, 1000);
		
		/****************嵌入socket开始**********************/
		/**此处是判断没有im权限情况下只可以监听消息推送*/
		if($("#im").html()==undefined){
			socket.onmessage = function(event) {
				var data = JSON.parse(event.data);
				//监听消息推送
				listenMsg(data);
			}
		}
		/****************嵌入socket结束**********************/
	});
	
	/**消息提醒*/
	function notice(){
		U.notice("您有待办任务，请及时处理");
	}
	
	/**监听消息推送*/
	function listenMsg(data){
		//监听消息
		if (data.emit == 'notice') {
			U.notice(data.content); 
			return;
		}
		//监听超时
		if (data.emit == 'overtime') {
			U.overtime("您已超时，请重新登录",function(){
				window.location = app_path + '/login.html';
			}); 
			return;
		}
	}
</script>
<!-- 判断im权限 -->
<shiro:hasPermission name="message:im">
	<script id="im" type="text/javascript">
		/**清空本地layim缓存*/
		localStorage.clear();
		
		layui.use('layim', function(layim) {
			/**基础配置*/
			layim.config({
		
				//获取主面板列表信息
				init : {
					url : "${pageContext.request.contextPath}/message/list.do",
					type : 'get', //默认get，一般可不填
					data : {"id":${sessionScope.loginUser.id}}
				},
		
				//群聊面板查看所有群成员
				/*
				members : {
					url : '${pageContext.request.contextPath}/static/getMembers.json',
					type : 'get', //默认get，一般可不填
					data : {}
				},
				*/
				uploadImage : {
					url : '${pageContext.request.contextPath}/message/upload.json', //（返回的数据格式见下文）
					type : 'post' //默认post
				},
				uploadFile : {
					url : '${pageContext.request.contextPath}/message/upload.json', //（返回的数据格式见下文）
					type : 'post' //默认post
				},
		
				skin : [ 'http://xxx.com/skin.jpg' ],//增加皮肤选择，如果不想增加，可以剔除该项
				brief : false, //是否简约模式（默认false，如果只用到在线客服，且不想显示主面板，可以设置 true）
				title : 'IM', //主面板最小化后显示的名称
				maxLength : 3000, //最长发送的字符长度，默认3000
				isfriend : true, //是否开启好友（默认true，即开启）
				isgroup : true, //是否开启群组（默认true，即开启）
				right : '0px', //默认0px，用于设定主面板右偏移量。该参数可避免遮盖你页面右下角已经的bar。
				//chatLog : app_path+'/chat/log/', //聊天记录地址（如果未填则不显示）
				//find : app_path+'/find/', //查找好友/群的地址（如果未填则不显示）
				copyright : true
			//是否授权，如果通过官网捐赠获得LayIM，此处可填true
			});
		
			/**监听发送消息*/
			layim.on('sendMessage', function(data) {
				var msg = {
					type : 'chat',
					data : data.mine.content,
					mine : data.mine,
					to : data.to
				};
				socket.send(JSON.stringify(msg));
			});
		
			/**监听收到的聊天消息*/
			socket.onmessage = function(event) {
				var data = JSON.parse(event.data);
				log(data);
				//监听消息推送
				listenMsg(data);
				//监听聊天
				if (data.emit == 'chat') {
					layim.getMessage(data);
					return;
				}
				//监听下线
				if (data.emit == 'off') {
					var $member=$("#layim-friend"+data.id);
					$member.find("img").attr("style",U.grey);
					return;
				}
				//监听上线
				if (data.emit == 'on') {
					var $member=$("#layim-friend"+data.id);
					$member.find("img").attr("style","");
					return;
				}
			};
			
			socket.onerror=function(event){
				U.alert('连接超时，请重新刷新页面');
			}
		
			/**layim建立就绪*/
			layim.on('ready', function(res) {
				/**layim图片加载失败，显示默认头像*/
				$(".layui-layim img").error(function() {
					this.src = U.defalutHead;
				});
				
				ajaxCall("message/updateList.do",{},function(_rsp){
					$.each(_rsp.data,function(i,item){
						var $member=$("#layim-friend"+item);
						$member.find("img").attr("style",U.grey);
					});
				});
				/**接收离线消息*/
				/*
				setTimeout(function() {
				}, 1000);
				*/
			});
		
			/**监听查看群员*/
			layim.on('members', function(data) {
				log('监听查看群员');
			});
		
			/**监听聊天窗口的切换*/
			layim.on('chatChange', function(data) {
				log('监听聊天窗口的切换');
			});
		
			/**监听在线状态的切换事件*/
			layim.on('online', function(data) {
				log('监听在线状态的切换事件');
			});
		
		});
	</script>
</shiro:hasPermission>
</html>